Introduction

TuPerfil.net — Portal de noticias regional construido con Next.js, Supabase y Tailwind CSS.

What is TuPerfil.net?

TuPerfil.net is a full-featured regional news portal designed for local journalism. It provides a modern public-facing website for readers and a streamlined admin dashboard for editors and administrators to manage content without technical expertise.

The platform is a complete redesign of the original WordPress site, built from the ground up with performance, simplicity, and editorial flexibility in mind.

Get started quickly

Set up TuPerfil.net locally in minutes with Next.js and Supabase.

Architecture overview

Understand how the public site, admin panel, and database fit together.

Admin panel guide

Learn to manage articles, categories, comments, and more.

Deploy to production

Ship to Vercel with Supabase in a few steps.

Tech stack

Layer	Technology
Framework	Next.js 14 (App Router, TypeScript)
Database / Auth / Storage	Supabase (PostgreSQL + RLS)
Styling	Tailwind CSS + Typography plugin
Rich text editor	TipTap
Email	Resend
Date utilities	date-fns (Spanish locale)
Deployment	Vercel

Key features

Public news portal

Hero carousel, trending articles, category sections, search, and an RSS feed — all server-rendered for SEO.

Six editorial categories

Político, Judicial, Salud, Deportivo, Regional, and Internacional — each with its own color and slug.

Full admin dashboard

CRUD for articles, categories, tags, breaking news, comments, newsletter, and advertising — no technical skills required.

Rich text editing

TipTap-powered editor with image uploads, tables, YouTube embeds, and link management.

Analytics & trending

Page view tracking, weekly popular articles, and 24-hour trending computed via Supabase RPCs.

Newsletter & email

Subscriber management and email delivery through the Resend API.

Comment moderation

Reader comments with an approval workflow to keep discussion on-topic.

Ad management

Header, sidebar, and between-articles ad placements with click tracking.

User roles

TuPerfil.net supports two roles managed through Supabase Auth:

• Admin — Full access to all features including user management, advertising, and statistics.
• Editor — Can create and publish articles, manage comments, and respond to messages.

Project structure

src/
├── app/
│   ├── (public)/          # Public-facing routes (home, categories, articles, search, contact)
│   ├── admin/             # Admin dashboard (protected by middleware auth)
│   └── api/               # API route handlers
├── components/
│   ├── public/            # Header, Footer, ArticleCard, HeroCarousel, etc.
│   └── admin/             # Sidebar, ArticleForm, TipTap editor, etc.
├── lib/
│   ├── supabase/          # Supabase clients (client, server, admin, middleware)
│   ├── auth.ts            # Auth helpers
│   ├── newsletter.ts      # Resend email integration
│   └── utils.ts           # Slug generation, date formatting
└── types/
    └── index.ts           # TypeScript interfaces (Article, Category, Tag, Comment, etc.)